<!-- 侧边栏 -->
<template>
    <div id="asideMenu">
        <!-- element菜单组件 -->
        <el-menu default-active="/welcome" class="el-menu-vertical" :collapse="isAsideMenuCollapse" router>
            <!-- home -->
            <el-menu-item index="/welcome">
                <i class="el-icon-s-platform"></i>
                <span slot="title">Home</span>
            </el-menu-item>
            <!-- 系统管理 -->
            <el-submenu index="1">
                <template slot="title">
                    <i class="el-icon-s-tools"></i>
                    <span>系统管理</span>
                </template>
                <el-menu-item index="/system/">用户管理</el-menu-item>
                <el-menu-item index="/system/menu">菜单管理</el-menu-item>
                <el-menu-item index="/system/role">角色管理</el-menu-item>
                <el-menu-item index="/system/department">部门管理</el-menu-item>
            </el-submenu>
            <!-- 审批管理 -->
            <el-submenu index="2">
                <template slot="title">
                    <i class="el-icon-s-claim"></i>
                    <span>审批管理</span>
                </template>
                <el-menu-item index="/audit/">休假申请</el-menu-item>
                <el-menu-item index="/audit/approve">待我审批</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>
</template>

<script>
// 引入vuex
import { mapState } from "vuex";

export default {
    name: "AsideMenu",
    data() {
        return {

        };
    },
    computed: {
        ...mapState(['isAsideMenuCollapse']),
    }
};
</script>

<style lang="scss" scoped>
#asideMenu {
    .el-menu-vertical {
        // 隐藏右边框
        border-right: none;
    }

    .el-menu-vertical:not(.el-menu--collapse) {
        // 侧边栏的宽度
        width: 240px;
        min-height: 400px;
    }
}
</style>